<script setup lang="ts">
import type { LabelVO } from '@/types/vo/LabelVO'

const { labelInfo, clickCallback, activeLabel } = defineProps<{
  labelInfo: LabelVO
  clickCallback?: (value: LabelVO) => any
  activeLabel: LabelVO
}>()
const handelClick = () => {
  console.log('clickCallback', clickCallback)
  // eslint-disable-next-line @typescript-eslint/no-unused-expressions
  clickCallback && clickCallback(labelInfo)
}
const isActive = computed(() => {
  return activeLabel?.id === labelInfo?.id
})
</script>

<template>
  <div
    class="tag font-size-12px relative c-#000022 py-1px px-4px text-align-center rounded hover:bg-#f0f0f0 cursor-pointer hover:c-#2c83fd"
    :class="{
      active: isActive,
    }"
    @click="handelClick"
  >
    {{ labelInfo?.labelName || '' }}
  </div>
</template>

<style scoped lang="scss">
.tag {
  &.active {
    background-color: #4096ff !important;
    color: #ffffff !important;
  }
}


</style>
